<template>
  <view>
    <view :class="getClass">
      <!-- 状态栏 -->
      <view :style="'height:'+statusBarHeight+'px'">
        
      </view>
      <!-- 导航 -->
      <view class="w-100 flex align-center justify-between" style="height: 90rpx;">
        <!-- 导航左 -->
        <view class="flex align-center">
          <!-- 返回按钮 -->
          <free-icon-button v-if="showBack" @click="back">&#xe675;</free-icon-button>
          <!-- 标题 -->
          <slot>
            <text class="font-md ml-3" v-if="title">{{getTitle}}</text>
          </slot>
        </view>
        <!-- 导航右 -->
        <view class="flex align-center" v-if="showRight">
          <slot name="right">
            <!-- 自定义组件 -->
          <free-icon-button @click="search">&#xe678;</free-icon-button>
          <!-- 这是原生写法 -->
          <view  @click="openExtend" style="height: 90rpx;width: 90rpx;" class="flex align-center justify-center">
            <text class="iconfont font-custom">&#xe664;</text>
          </view>
          </slot>
        </view>
      </view>
    </view>
    <!-- 占位 -->
    <!-- 因为我们使用定位导航栏后，会空出一部分，我们就用这个占位 -->
    <view v-if="fixed" :style="fixedStyle">
      
    </view>
    <!-- 扩展菜单 -->
    <free-popup v-if="showRight" ref="extend" maskColor :bodyWidth="320" :bodyHeight="525" bodyBgColor="bg-dark">
      <view class="flex flex-column" style="width: 320rpx;height: 525rpx;">
        <view @click="clickEvent(item.event)" class="flex-1 flex align-center" hover-class="bg-hover-dark" v-for="(item,index) in menus" :key="index">
          <text class="iconfont font-icon-vogage">{{item.icon}}</text>
          <text class="font-md text-white">{{item.name}}</text>
        </view>
      </view>
    </free-popup>
  </view>
</template>

<script>
  import freeIconButton from "./free-icon-button.vue"
  import freePopup from './free-popup.vue'
  export default {
    props: {
      showBack: {
        type: Boolean,
        default: false
      },
      backEvent: {
        type: Boolean,
        default: true
      },
      title: {
        type: [String, Boolean],
        default: false
      },
      fixed: {
        type: Boolean,
        default: true
      },
      // 未读数
      noreadnum: {
        type: Number,
        default: 0
      },
      bgColor: {
        type: String,
        default: "bg-light"
      },
      showRight: {
        type: Boolean,
        default: true
      }
    },
    data() {
    	return {
    		statusBarHeight: 0,
        navBarHeight: 0,
        menus: [
          { name: "发起群聊", event: "", icon: "" }, { name: "添加好友", event: "", icon: "" }, { name: "扫一扫", event: "", icon: "" }, { name: "收付款", event: "", icon: "" }, { name: "帮助与反馈", event: "", icon: "" }
        ]
    	}
    },
    mounted() {
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.navigatorsc.getStatusbarHeight()
      // #endif
      // 将rpx单位值转换成px
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
    },
    computed: {
      // 动态计算属性的高度
      fixedStyle() {
        return `height: ${this.navBarHeight}px`
      },
      getTitle(){
      	let noreadnum = this.noreadnum > 0 ? '('+this.noreadnum+')' : ''
      	return this.title + noreadnum
      },
      getClass() {
        let fixed = this.fixed ? 'fixed-top' : ''
        return `${fixed} ${this.bgColor}`
      }
    },
    methods: {
     openExtend() {
       // this.$emit('openExtend')
       this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150))
     },
     // 返回
     back() {
       if (this.backEvent) {
         return uni.navigateBack({
           delta: 1
         })
       }
       this.$emit('back')
     },
     search() {
       uni.navigateTo({
         url: '/pages/common/search/search'
       })
     }
    },
    components: { freeIconButton, freePopup },
  }
</script>

<style>
  .font-custom {
    font-size: 25px;
  }
  .font-icon-vogage {
    font-size: 25px;
    color: white;
    padding-left: 30px;
    padding-right: 20px;
  }
</style>
